<template>
  <div class="left-card">
    <m-card title="地震频次分布">
      <div class="population-proportion">
        <div class="population-proportion-chart">
          <v-chart ref="vChart" :option="option" :autoresize="true" />
          <div class="label-name">地震频次</div>
        </div>
        <div class="pie-legend">
          <div
            class="pie-legend-item"
            v-for="(item, index) in state.pieData"
            :key="index"
          >
            <div
              class="icon"
              :style="{ borderColor: state.pieDataColor[index] }"
            ></div>
            <div class="pie-legend-item-name">{{ item.name }}级</div>
          </div>
        </div>
      </div>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";

const state = reactive({
  pieDataColor: ["#409EFF", "#E6A23C", "#F56C6C"],
  pieData: [
    {
      name: "3.0~3.9",
      value: 40,
    },
    {
      name: "4.0~4.9",
      value: 25,
    },
    {
      name: "5.0+",
      value: 20,
    },
  ],
});
const option = ref({
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow",
      shadowStyle: { opacity: 0 },
    },
    backgroundColor: "rgba(0,0,0,1)",
    borderWidth: 1,
    borderColor: "#999999",
    textStyle: {
      color: "#ffffff",
      fontSize: 14,
    },
  },

  series: [
    {
      name: "",
      type: "pie",
      itemStyle: {
        borderWidth: 5,
        borderColor: "rgba(26, 57, 77,1)",
      },
      label: {
        show: false,

      },
      radius: ["55%", "70%"],
      color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
      // 关键：设置鼠标悬停时的文字样式
   
      data: [
        {
          value: 40,
          name: "3.0-3.9级",
          itemStyle: {
            //颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "#A0CFFF" },
              { offset: 1, color: "#409EFF" },
            ]),
          },
        },
        {
          value: 25,
          name: "4.0-4.9级",
          itemStyle: {
            //颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "#F3D19E" },
              { offset: 1, color: "#E6A23C" },
            ]),
          },
        },
        {
          value: 20,
          name: "5.0+级",
          itemStyle: {
            //颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "#FAB6B6" },
              { offset: 1, color: "#F56C6C" },
            ]),
          },
        },
      ],
    },
  ],
});
const init=()=>{
  
}
</script>
<style lang="scss" scoped>
.pie-legend {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pie-legend-item {
  width: 100%;
  flex-grow: 1;
  &-name {
    font-size: 1.4vw;
    color: white;
  }
}
.population-proportion-chart .label-name {
  font-size: 1.2vw;
}
</style>
<style lang="scss" scoped>
  .population-proportion {
    display: flex;
    height: 100%;
    &-chart {
      position: relative;
      width: 240px;
      height: 100%;
      margin-left: 15px;
      background: url("~@/assets/images/pie/pie-zs-bg.png") no-repeat;
      background-size: cover;
      .label-name {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5vw;
        height: 72px;
        margin-left: -36px;
        margin-top: -36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #c4e3fd;
      }
      &:after {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: -1;
        margin-left: -36px;
        margin-top: -36px;
        content: "";
        width: 72px;
        height: 72px;
        background: url("~@/assets/images/pie/pie-mid-circle.png") no-repeat;
        background-size: cover;
        animation: rotate360Animate 2s linear infinite;
      }
    }
    .pie-legend {
      padding-left: 0px;
    }
  }
  
  </style>
